<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../../three.js-r151/build/three.module.js",
		"three/addons/": "../../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        api
    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);



        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 创建动画
        // 3.1 给需要设置关键帧动画的模型命名
        cube.name = "Box";
        // 3.2 创建关键帧数据KeyframeTrack
        const posKF = new THREE.KeyframeTrack('Box.position', [0, 3, 6],
            [0, 0, 0, 3, 0, 0, 0, 0, 3]);
        const colorKF = new THREE.KeyframeTrack('Box.material.color', [2, 5],
            [1, 0, 0, 0, 0, 1]);
        // 3.3 基于关键帧数据，创建一个clip关键帧动画对象，命名"test"，持续时间6秒。
        const clip = new THREE.AnimationClip("test", 9, [posKF, colorKF]);
        // 3.4 创建混合器(模型对象)，mixer中返回一个AnimationAction对象
        const mixer = new THREE.AnimationMixer(cube);
        const clipAction = mixer.clipAction(clip);
        //.play()控制动画播放，默认循环播放
        clipAction.play();

        // 4. API
        {
            //不循环播放
            // clipAction.loop = THREE.LoopOnce; 
            // 物体状态停留在动画结束的时候， 还得同时设置 THREE.LoopOnce才能生效
            // clipAction.clampWhenFinished = true;

            // 任意时刻
            //在暂停情况下，设置.time属性,把动画定位在任意时刻
            clipAction.paused = true;
            clipAction.time = 4;//物体状态为动画3秒对应状态
            

        }

        const clock = new THREE.Clock();
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)

            // 更新播放器相关的时间
            mixer.update(clock.getDelta());
        }
        render();
    </script>
</body>

</html>